﻿@page

@model Senparc.Areas.Admin.Pages.IndexModel
@{
    ViewData["Title"] = "管理员后台首页";
    Layout = "_Layout_Vue";
}
@section style{
    <style>
        .xncf-stat-item {
            position: relative;
            display: block;
            margin-bottom: 12px;
            border: 1px solid #E4E4E4;
            overflow: hidden;
            padding-bottom: 5px;
            border-radius: 5px;
            background-clip: padding-box;
            background: #FFF;
            transition: all 300ms ease-in-out;
            padding-left: 10px;
        }

            .xncf-stat-item .icon {
                font-size: 60px;
                color: #BAB8B8;
                position: absolute;
                right: 20px;
                top: -5px;
            }

            .xncf-stat-item .count {
                font-size: 38px;
                font-weight: bold;
                line-height: 1.65857;
            }

            .xncf-stat-item .tit {
                color: #BAB8B8;
                font-size: 24px;
            }

            .xncf-stat-item p {
                margin-bottom: 5px;
            }

        .chart-title {
            font-size: 20px;
        }

        .chart-li {
            padding-top: 20px;
        }

            .chart-li li {
                line-height: 2;
            }

            .chart-li .fa {
                margin-right: 5px;
            }

        .box-card {
            margin-top:20px
        }

        #xncf-modules-area{margin-bottom:50px;}
         #xncf-modules-area .xncf-item{
             
         }

         #xncf-modules-area .xncf-item .version{ float:right;}
         #xncf-modules-area .xncf-item .icon{ float:left;}
    </style>
}
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf

<!-- 统计数据 -->
<div>
    <el-container>
        <el-header class="module-header">
            <span class="start-title"><span class="module-header-v">NeuCharFramework 管理员后台</span></span>
        </el-header>
        <el-main></el-main>
    </el-container>
    <el-row :gutter="20">
        <el-col :span="6">
            <a href="~/Admin/XncfModule/Index">
            <div class="grid-content xncf-stat-item">
                <span class="count">{{xncfStat.installedXncfCount || 0}}</span>
                <div class="icon">
                    <i class="fa fa-caret-square-o-right"></i>
                </div>
                <p class="tit">已安装模块</p>
            </div>
            </a>
        </el-col>
        <el-col :span="6">
            <a href="~/Admin/XncfModule/Index">
            <div class="grid-content bg-purple xncf-stat-item">
                <span class="count">{{xncfStat.updateVersionXncfCount || 0}}</span>
                <div class="icon">
                    <i class="fa fa-comments-o"></i>
                </div>
                <p class="tit">待更新模块</p>
            </div>
            </a>
        </el-col>
        <el-col :span="6">
                        <a href="~/Admin/XncfModule/Index">
            <div class="grid-content bg-purple xncf-stat-item">
                <span class="count">{{xncfStat.newXncfCount || 0}}</span>
                <div class="icon">
                    <i class="fa fa-sort-amount-desc"></i>
                </div>
                <p class="tit">发现新模块</p>
            </div>
            </a>
        </el-col>
        <el-col :span="6">
            <a href="~/Admin/XncfModule/Index">
            <div class="grid-content bg-purple xncf-stat-item">
                <span class="count">{{xncfStat.missingXncfCount || 0}}</span>
                <div class="icon">
                    <i class="fa fa-check-square-o"></i>
                </div>
                <p class="tit">模块异常</p>
            </div>
            </a>
        </el-col>
    </el-row>
    <el-row :gutter="10">
        <el-col :xs="20" :sm="20" :md="20" :lg="12" :xl="12">
            <el-card class="box-card">
                <div id="firstChart" style="height:350px;width: 100%">
                </div>
            </el-card>
        </el-col>
        <el-col :xs="20" :sm="20" :md="20" :lg="12" :xl="12">
            <el-card class="box-card">
                <div id="secondChart" style="height:350px;width: 100%">
                </div>
            </el-card>
        </el-col>
    </el-row>
</div>

<!-- 功能模块 -->
<div>
    <el-row>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>功能模块</span>
        </div>
        <div id="xncf-modules-area">
            <el-row :gutter="20">
                <el-col :span="6" class="xncf-item" v-for="item in xncfOpeningList" v-key="item.Id">
                    <el-card class="box-card">
                      <div slot="header" class="clearfix">
                        <span>{{item.menuName}}</span> <small class="version">v{{item.version}}</small>
                      </div>
                      <a class="component-item" v-bind:href="'/Admin/XncfModule/Start/?uid='+item.uid">
                        <span class=""><i v-bind:class="[item.icon,'icon']"></i></span>
                          

                        @*<a v-bind:href="'/Admin/XncfModule/Start/?uid='+item.uid">{{item.menuName}}</a>*@
                      </a>
                    </el-card>
              </el-col>
            </el-row>
        </div>
      </el-card>
    </el-row>
</div>

@section scripts{
    <script src="~/lib/echarts/dist/echarts.js"></script>
    <script src="~/js/Admin/Pages/Index/Index.js"></script>
}